<template>
  <div>
    <ConditionCard
      shadow="never"
      body-style="padding: 24px 24px 6px 24px;"
      @search="onSearch"
      @reset="onReset('queryForm')"
    >
      <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="80px">
        <el-row>
          <!-- 年级-->
          <el-col :span="8">
            <el-form-item :label="$t('preparatoryGraduation.common.grade')">
              <el-date-picker
                v-model="queryForm.grade"
                value-format="yyyy"
                align="right"
                type="year"
                @change="handleGradeChange"
                :placeholder="$t('common.pla.pleaseSelect')"
                clearable
                style="width: 100%" />
            </el-form-item>
          </el-col>
          <!-- 学院 -->
          <el-col :span="8" v-if="showOther">
            <el-form-item :label="$t('preparatoryGraduation.common.college')">
              <DictSelect v-model="queryForm.college" :data="source.colleges" @change="handleCollegeChange"/>
            </el-form-item>
          </el-col>
          <!-- 专业 -->
          <el-col :span="8" v-if="showOther">
            <el-form-item :label="$t('preparatoryGraduation.common.major')">
              <DictSelect v-model="queryForm.major" :data="source.majors"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ConditionCard>
  </div>
</template>
<script>
  import completionAudit from '../../completionAudit.js';
  export default {
    name: "searchStandardTab",
    mixins: [completionAudit],
    props: {
      showOther: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        queryForm: {
          grade:"",
          college: "",
          major: ""
        },
        defaultQueryForm: {
          grade:"",
          college: "",
          major: ""
        },
        source: {
          colleges: [], // 学院
          majors: [] // 专业
        }
      };
    },
    methods: {
      onSearch() {
        this.$emit("search", this.queryForm);
      },
      onReset() {
        this.$refs['queryForm'].resetFields();
        this.queryForm = { ...this.defaultQueryForm };
        this.source.majors=[];
        this.$emit("reset");
      }
    }
  };
</script>
